<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>结算页</title>

	<link rel="stylesheet" type="text/css" href="../js/shop/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="../js/shop/css/pages-getOrderInfo.css" />
</head>

<body>
<!--head-->

<div class="cart py-container">
	<!--主内容-->
	<div class="checkout py-container">
		<div class="checkout-tit">
			<h4 class="tit-txt">填写并核对订单信息</h4>
		</div>
		<div class="checkout-steps">
			<!--收件人信息-->
			<div class="step-tit">
				<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd" onclick="clearInfo();">新增收货地址</a></span></h5>
			</div>
			<div class="step-cont">
				<div class="addressInfo">
					<ul class="addr-detail">
						<li class="addr-item" id="addrDiv">


						</li>


					</ul>
					<!--添加地址-->
					<div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
									<h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
								</div>
								<div class="modal-body">
									<form action="" class="sui-form form-horizontal">
										<div class="control-group">
											<label class="control-label">收货人：</label>
											<div class="controls">
												<input type="text" class="input-medium" id="recipientName">
											</div>
										</div>

										<div class="control-group">
											<label class="control-label">详细地址：</label>
											<div class="controls">
												<input type="text" class="input-large" id="addr">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label">联系电话：</label>
											<div class="controls">
												<input type="text" class="input-medium" id="phone">
											</div>
										</div>

									</form>


								</div>
								<div class="modal-footer">
									<button type="button" data-ok="modal" class="sui-btn btn-primary btn-large" onclick="submitData();">确定</button>
									<button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
								</div>
							</div>
						</div>
					</div>
					<!--确认地址-->
				</div>
				<div class="hr"></div>

			</div>
			<div class="hr"></div>
			<!--支付和送货-->
			<div class="payshipInfo">
				<div class="step-tit">
					<h5>支付方式</h5>
				</div>
				<div class="step-cont">
					<ul class="payType">
						<li class="selected">微信付款<span title="点击取消选择"></span></li>
						<li>货到付款<span title="点击取消选择"></span></li>
					</ul>
				</div>
				<div class="hr"></div>
				<div class="step-tit">
					<h5>送货清单</h5>
				</div>
				<div class="step-cont">
					<ul class="send-detail" id="cartItemUl">


					</ul>
				</div>
				<div class="hr"></div>
			</div>
			<div class="linkInfo">
				<div class="step-tit">
					<h5>发票信息</h5>
				</div>
				<div class="step-cont">
					<span>普通发票（电子）</span>
					<span>个人</span>
					<span>明细</span>
				</div>
			</div>
			<div class="cardInfo">
				<div class="step-tit">
					<h5>使用优惠/抵用</h5>
				</div>
			</div>
		</div>
	</div>
	<div class="order-summary">
		<div class="static fr">
			<div class="list">
				<span><i class="number" id="itemTotalCount"></i>件商品，总商品金额</span>
				<em class="allprice" id="totalPrice"></em>
			</div>
			<div class="list">
				<span>返现：</span>
				<em class="money">0.00</em>
			</div>
			<div class="list">
				<span>运费：</span>
				<em class="transport">0.00</em>
			</div>
		</div>
	</div>
	<div class="clearfix trade">
		<div class="fc-price">应付金额:　<span class="price" id="totalPayPrice"></span></div>
		<div class="fc-receiverInfo" id="recipientAddr"></div>
	</div>
	<div class="submit">
		<a class="sui-btn btn-danger btn-xlarge" id="orderButton" href="javascript:;" onclick="submitOrder();">提交订单</a>
<!--		<input type="button" id="orderButton" onclick="submitOrder();" value="提交订单">-->
	</div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="Mod-service">
				<ul class="Mod-Service-list">
					<li class="grid-service-item intro  intro1">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro2">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro  intro3">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro4">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro intro5">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
				</ul>
			</div>
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>品优购E卡</li>
							<li>品优购通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!--页面底部END-->


<div id="recipientTemplate" style="display: none;">
	<div>
		<div class="con name ##check##" onclick="updateStatus('##id##')"><a href="javascript:;" >##recipientName##<span title="点击取消选择">&nbsp;</a></div>
		<div class="con address" name="addrInfoDiv" onclick="updateRecipient(this,'##id##');">##addr## <span>##phone##</span>
			##defaultAddr##
			<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" onclick="findAddr('##id##')">编辑</a>&nbsp;&nbsp;<a href="javascript:;" onclick="deleteAddr('##id##')">删除</a></span>
		</div>
		<div class="clearfix"></div>
	</div>
</div>

<div id="cartItemTemplate" style="display:none;">
	<li>

		<div class="sendGoods">

			<ul class="yui3-g">
				<li class="yui3-u-1-6">
					<span><img src="##mainImage##"/></span>
				</li>
				<li class="yui3-u-7-12">
					<div class="desc">##productName##</div>
					<div class="seven">7天无理由退货</div>
				</li>
				<li class="yui3-u-1-12">
					<div class="price">￥##price##</div>
				</li>
				<li class="yui3-u-1-12">
					<div class="num">X##count##</div>
				</li>
				<li class="yui3-u-1-12">
					<div class="exit">有货</div>
				</li>
			</ul>
		</div>
	</li>
</div>
<script type="text/javascript" src="../js/shop/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../js/shop/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="../js/shop/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="../js/shop/components/ui-modules/nav/nav-portal-top.js"></script>
<script type="text/javascript" src="../js/shop/js/pages/getOrderInfo.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
</body>


<script>
	let x_token;
	let v_currAddr;
	let v_recipientList;
	$(function () {
		x_token = sessionStorage.getItem(config.X_TOKEN);
		// 因为ajax是异步执行的
		// 同步 先写A方法，再写B方法。 A执行完，才会执行B。
		// 异步 先写A方法，再写B方法。 A，B 基本上同时执行。
		initRecipientList();
		initCart();
		createToken();
	})
	let v_uuid;
	function createToken() {
		$.ajax({
			type:"post",
			url:config.SERVER_URL+"/token/createToken",
			success:function (res) {
				if (res.code == config.SUCCESS) {
					v_uuid = res.data;
				}
			}
		})
	}


	function submitOrder() {
		// js验证
		if (!v_currAddr) {
			alert("请选择收件人！！！");
			return;
		}
		// 通过前台js防止你进行重复提交
		// $("#orderButton").attr("disabled", "disabled");// 解决按钮方式

		// 解决 超链接 方式
		$("#orderButton").removeAttr("onclick");
		$("#orderButton").attr("disabled", "disabled");
		if (x_token) {
			let v_param = {};
			v_param.payType = 1;
			v_param.recipientId = v_currAddr.id;
			$.ajax({
				type:"post",
				url:config.SERVER_URL+"/orders/submitOrder",
				beforeSend:function (xhr) {
					xhr.setRequestHeader(config.X_AUTH, x_token);
					xhr.setRequestHeader(config.X_IDEMPOTENCE, v_uuid);
				},
				data:v_param,
				success:function (res) {
					if (res.code == config.SUCCESS) {
						// alert("提交订单成功！！！");
						let v_orderId = res.data;
						// 地址栏
						location.href=config.SERVER_URL+"/pay/aliPayPage?orderId="+v_orderId;
					} else {
						alert(res.msg);
					}
				}
			})
		}
	}


	function updateRecipient(obj, id) {
		// 清空所有收件人样式【重置】
		$(".con.address").css({"font-weight":"", "color":""})
		// $("div[name='addrInfoDiv']").css({"font-weight":"", "color":""})
		// 增加样式
		$(obj).css({"font-weight":"bold", "color":"red"})
		// 回填 邮寄地址
		for (let v_addr of v_recipientList) {
			if (v_addr.id == id) {
				v_currAddr = v_addr;
				break;
			}
		}
		let v_addr = "寄送至:"+v_currAddr.addr+" 收货人："+v_currAddr.recipientName+" "+v_currAddr.phone;
		$("#recipientAddr").html(v_addr);
	}

	function clearInfo() {
		$("#recipientName").val("");
		$("#addr").val("");
		$("#phone").val("");
		v_item = null;
	}
	let v_item;
	function findAddr(id) {
		// 非空验证

		$.ajax({
			type:"get",
			url:config.SERVER_URL+"/recipients/"+id,
			beforeSend:function (xhr) {
				xhr.setRequestHeader(config.X_AUTH, x_token);
			},
			success:function (res) {
				if (res.code == config.SUCCESS) {
					v_item = res.data;
					$("#recipientName").val(v_item.recipientName);
					$("#addr").val(v_item.addr);
					$("#phone").val(v_item.phone);
				}
			}
		})
	}

	function submitData() {
		let v_param = {};
		v_param.recipientName = $("#recipientName").val();
		v_param.addr = $("#addr").val();
		v_param.phone = $("#phone").val();
		// js验证
		if (!v_item) {
			// 增加
			$.ajax({
				type:"post",
				url:config.SERVER_URL+"/recipients",
				contentType:"application/json",
				data:JSON.stringify(v_param),
				beforeSend:function (xhr) {
					xhr.setRequestHeader(config.X_AUTH, x_token);
				},
				success:function (res) {
					if (res.code == config.SUCCESS) {
						// 刷新
						initRecipientList();
					}
				}
			})
		} else {
			// 更新
			v_param.id = v_item.id;
			$.ajax({
				type:"put",
				url:config.SERVER_URL+"/recipients",
				contentType:"application/json",
				data:JSON.stringify(v_param),
				beforeSend:function (xhr) {
					xhr.setRequestHeader(config.X_AUTH, x_token);
				},
				success:function (res) {
					if (res.code == config.SUCCESS) {
						// 刷新
						initRecipientList();
					}
				}
			})
		}

	}


	function updateStatus(id) {
		$.ajax({
			type:"post",
			url:config.SERVER_URL+"/recipients/"+id,
			beforeSend:function(xhr) {
				xhr.setRequestHeader(config.X_AUTH, x_token);
			},
			success:function (res) {
				if (res.code == config.SUCCESS) {
					// 刷新
					initRecipientList();
				}
			}
		})
	}

	function initCart() {
		if (x_token) {
			$.ajax({
				type:"get",
				url:config.SERVER_URL+"carts",
				beforeSend:function(xhr) {
					xhr.setRequestHeader(config.X_AUTH, x_token);
				},
				success:function (res) {
					if (res.code == 200) {
						console.log(res);
						var v_cart = res.data;
						var v_itemList = v_cart.cartItemVoList;
						var v_html = "";
						var v_template = $("#cartItemTemplate").html();
						for (let v_item of v_itemList) {
							v_html += v_template.replace(/##mainImage##/g, v_item.image)
									.replace(/##productName##/g, v_item.productName)
									.replace(/##price##/g, v_item.price)
									.replace(/##count##/g, v_item.count)
						}
						$("#cartItemUl").html(v_html);

						$("#itemTotalCount").html(v_cart.totalCount);
						let v_price = "￥"+v_cart.totalPrice;
						$("#totalPrice").html(v_price);
						$("#totalPayPrice").html(v_price);



					}
				}
			})
		}
	}


	function deleteAddr(id) {
		// 非空验证 js
		$.ajax({
			type:"delete",
			url:config.SERVER_URL+"/recipients/"+id,
			beforeSend:function (xhr) {
				xhr.setRequestHeader(config.X_AUTH, x_token);
			},
			success:function (res) {
				if (res.code == config.SUCCESS) {
					initRecipientList();
				}
			}

		})
	}

	function initRecipientList() {
		$.ajax({
			type:"get",
			url:config.SERVER_URL+"/recipients",
			beforeSend:function (xhr) {
				xhr.setRequestHeader(config.X_AUTH, x_token);
			},
			success:function (res) {
				if (res.code == config.SUCCESS) {
					v_recipientList = res.data;
					console.log(v_recipientList);
					let v_templateHtml = $("#recipientTemplate").html();
					let v_html = "";
					for (let v_item of v_recipientList) {
						v_html += v_templateHtml.replace(/##recipientName##/g, v_item.recipientName)
									  .replace(/##addr##/g, v_item.addr)
									  .replace(/##id##/g, v_item.id)
									  .replace(/##phone##/g, v_item.phone)
									  .replace(/##check##/g, v_item.status == 1?"selected":"")
									  .replace(/##defaultAddr##/g, v_item.status == 1?"<span class=\"base\">默认地址</span>":"")
						if (v_item.status == 1) {
							v_currAddr = v_item;
						}
					}
					// 回填收件人地址列表
					$("#addrDiv").html(v_html);
					initHover();

					// 回填 邮寄地址
					let v_addr = "寄送至:"+v_currAddr.addr+" 收货人："+v_currAddr.recipientName+" "+v_currAddr.phone;
					$("#recipientAddr").html(v_addr);
				}
			}
		})
	}

	function initHover() {
		$(".address").hover(function(){
			$(this).addClass("address-hover");
		},function(){
			$(this).removeClass("address-hover");
		});
	}
</script>

</html>